// 导入 react 依赖包
import React from 'react';
import ReactDOM from 'react-dom/client';

// 1 创建挂载点
const root = ReactDOM.createRoot(document.getElementById('root'));

// 条件渲染

// 1 条件
const isLoading = true;

// 2 渲染 UI
const loadingUI = <h3>数据加载中...</h3>;
const successUI = <h3>数据加载成功</h3>;

// 3 条件渲染函数
const loading = () => {
  if (isLoading) {
    return loadingUI;
  } else {
    return successUI;
  }
};

// 4 最终展示给用户的渲染UI
const jsx1 = <div>{loading()}</div>;

// 使用三元运算表达式
const jsx2 = (
  <div>{isLoading ? <h3>数据加载中...</h3> : <h3>数据加载成功</h3>}</div>
);

// 使用 &&
const jsx3 = <div> {isLoading && loadingUI} </div>;

root.render(jsx2);
